<!--
 * @Author: taosong
 * @Date: 2021-01-12 21:00:17
 * @LastEditors: taosong
 * @LastEditTime: 2021-01-18 20:58:40
 * @Description: taosongs
-->
<template>
  <div class="home">
    <common-header></common-header>
    <van-tabs v-model="active">
      <van-tab title="推荐音乐">
        <recommend-sing-list></recommend-sing-list>
      </van-tab>
      <van-tab title="热歌榜">内容 2</van-tab>
      <van-tab title="搜索">内容 3</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import CommonHeader from '@/components/CommonHeader.vue'
import { ref } from 'vue'
import RecommendSingList from './components/recommendSingList.vue'

export default {
  name: 'Home',
  components: { CommonHeader, RecommendSingList },
  setup() {
    const active = ref(2)
    return {
      active
    }
  }
}
</script>

<style lang="scss" scoped>
.home /deep/ .van-tabs__line {
  width: 120px;
}
.home /deep/ .van-tabs--line .van-tabs__wrap {
  border-bottom: 2px solid #eee;
}
.home /deep/ .van-tab__text--ellipsis {
  font-size: 27px;
}
</style>
